<template>
  <div class="chart">
    <template v-if="!currentDateIsNotEvaluate">
      <RingChart
        :data="ringChartData"
      >
        <template #tips>
          <div class="chart-title">
            <div class="title">
              <span>{{ evaluatePercent.good }}%/{{ evaluatePercent.bad }}%</span>
              <!--        <span class="unit">人</span>-->
            </div>
            <div class="sub-title">
              <!--        {{ chartTitleOptions.subTitle }}-->
              好评率/差评率
            </div>
          </div>
        </template>
      </RingChart>

      <div class="chart__footer">
        <div class="meal-data">
          <div
            v-for="(item, index) in ringChartData"
            :key="index"
            class="meal-data__item"
          >
            <div
              class="block"
              :style="{
                'background-color': item.color
              }"
            />
            <div>{{ item.label }}：{{ item.value }}人</div>
          </div>
        </div>
      </div>
    </template>

    <template v-else>
      <div style="height: 200px;">
        <el-empty style="padding: 0" description="暂无评价数据" />
      </div>
    </template>

  </div>
</template>
<script>
import RingChart from '@/views/repast/components/RingChart.vue'

export default {
  name: '',
  components: { RingChart },
  props: {
    data: {
      type: Object,
      default: () => []
    },
    ringChartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  computed: {
    evaluatePercent() {
      const { good, difference } = this.data
      const count = good + difference
      const goodPercent = (good / count) * 100
      const badPercent = (difference / count) * 100
      return {
        good: goodPercent.toFixed(2),
        bad: badPercent.toFixed(2)
      }
    },
    currentDateIsNotEvaluate() {
      const [good, bad] = this.ringChartData
      return !good?.value && !bad?.value
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  position: relative;

  .chart-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9;

    .title {
      color: #303133;
      line-height: 40px;
      >.count {
        font-size: 36px;
        font-weight: 700;
      }
      >.unit {
        font-size: 17px;
        font-weight: 400;
      }
    }

    .sub-title {
      color: #909399;
      font-size: 15px;
      font-weight: 400;
    }
  }

  &__footer {
    margin-top: 22px;
    .department {
      //padding: 0 64px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      &__item {
        padding: 0 10px 20px 10px;
        display: flex;
        align-items: center;
        color: #303133;
        font-size: 14px;

        .block {
          margin-right: 4px;
          border-radius: 2px;
          width: 12px;
          height: 12px;
        }

        .value {

        }
      }
    }

    .meal-data {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      //justify-content: space-around;
      &__item {
        display: flex;
        align-items: center;
        color: #303133;
        font-size: 14px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .block {
          width: 12px;
          height: 12px;
          //border-radius: 50%;
          margin-right: 8px;
        }
      }

    }
  }
}
</style>

